<template>
  <div class="ikun-basehome-container ikun-playerInfo-container">
    <el-descriptions :title="data.nickname" style="background:rgba(0,0,0,0)">
      <el-descriptions-item label="体力">{{ data.energy + "/" + data.maxEnergy }}
        <!-- <el-progress :percentage="data.percentage" :color="'#f56c6c'" >
          <span>{{ data.exp +'/'+ data.nextLvExp }}</span>  
        </el-progress> -->
      </el-descriptions-item>
      <!-- <el-descriptions-item label="昵称">{{ data.nickname }}</el-descriptions-item> -->
      <el-descriptions-item label="账号">{{ data.account }}</el-descriptions-item>
      <el-descriptions-item label="id">{{ data.id }}</el-descriptions-item>
      <el-descriptions-item label="经验">
        {{ data.exp + '/' + data.nextLvExp }}
        <!-- <el-progress :percentage="data.percentage" :color="'#f56c6c'" >
          <span>{{ data.exp +'/'+ data.nextLvExp }}</span>  
        </el-progress> -->
        <!-- <el-progress :percentage="data.percentage" /> -->
      </el-descriptions-item>
      <el-descriptions-item label="等级">{{ data.level }}</el-descriptions-item>
      <el-descriptions-item label="HP">{{ data.hp }}</el-descriptions-item>
      <el-descriptions-item label="攻击">{{ data.attack }}</el-descriptions-item>
      <el-descriptions-item label="防御">{{ data.defence }}</el-descriptions-item>
      <el-descriptions-item label="暴击">{{ data.criticalChance }}</el-descriptions-item>
      <el-descriptions-item label="连击率">{{ data.comboRate }}</el-descriptions-item>
      <el-descriptions-item label="闪避率">{{ data.flee }}</el-descriptions-item>
      <el-descriptions-item label="命中率">{{ data.flee }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import store from '../../../store'
@Component({
  components: {},
})
export default class PlayerInfoView extends Vue {
  data:any = {
  }

  created() {
    this.data = store.state?.userInfo
    this.data.percentage = this.data.exp / this.data.nextLvExp
  }
}
</script>
<style lang="stylus">
@import "./style.styl"
</style>
